<%--
  Created by IntelliJ IDEA.
  User: 郭宇轩
  Date: 2020/11/16
  Time: 22:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加入PetHub</title>
    <style type="text/css">
        @import url("../static/css/Header.css");
    </style>
    <link rel="Stylesheet" href="../static/css/BodyPart.css" type="text/css" media="screen"/>
    </meta>
</head>
<script>
    window.onload = function(){
        //获取文本输入框
        var textElment = document.getElementById("text");
        //获取下提示框
        var div = document.getElementById("tips");
        textElment.onkeyup=function(){
            //获取用户输入的值
            var text = textElment.value;
            //如果文本框中没有值，则下拉框被隐藏，不显示
            if(text==""){
                div.style.display="none";
                return;
            }
            //获取XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //编写回调函数
            xhr.onreadystatechange=function(){
                //判断回调的条件是否准备齐全
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //取的服务器端传回的数据
                        var str = xhr.responseText;

                        //判断传回的数据是否为空,若是则直接返回，不显示
                        if(str==""){
                            div.style.display="none";
                            return;
                        }
                        //我们将会在服务器端把数据用 , 隔开，当然这里也可以使用json
                        var result = str.split(",");
                        var childs = "";
                        //遍历结果集，将结果集中的每一条数据用一个div显示，把所有的div放入到childs中
                        for(var i=0; i<result.length;i++){
                            childs += "<div onclick=' Write(this)' onmouseout='recoverColorwhenMouseout(this)' onmouseover='changeColorwhenMouseover(this)'>"+result[i]+"</div>";
                        }
                        //把childs 这div集合放入到下拉提示框的父div中，上面我们以获取了
                        div.innerHTML=childs;
                        div.style = "    float: left;\n" +
                            "    position: relative;\n" +
                            "    left:242px;\n" +
                            "    top: 38px;\n" +
                            "    z-index: 100;\n" +
                            "    display: block;\n" +
                            "    width: 495px;\n" +
                            "    background-color: whitesmoke;\n" +
                            "    opacity: 100%; \n" +
                            "    color: black;";
                    }
                }
            }

            //创建与服务器的连接
            xhr.open("GET","${pageContext.request.contextPath}/AutoComplete?text="+text);


            //发送
            xhr.send();
        }
    }
    //鼠标悬停时改变div的颜色
    function changeColorwhenMouseover(div){
        div.style.backgroundColor="black";
        div.style.color="orange";
    }
    //鼠标移出时回复div颜色
    function recoverColorwhenMouseout(div){
        div.style.backgroundColor="";
        div.style.color="";
    }
    //当鼠标带点击div时，将div的值赋给输入文本框
    function Write(div){
        //将div中的值赋给文本框
        document.getElementById("text").value=div.innerHTML;

        //让下拉提示框消失

        div.parentNode.style.display="none";
    }
</script>
<%@ include file="../MainPage/Header.jsp"%>

<form action="../Register" method="post" id="Position">
    <a style="position: absolute; left: 640px; top: 120px;">名字：
        <input name="name" type="text" placeholder="输入名字"/>
    </a>
    <a style="position: absolute; left: 640px; top: 150px;">用户ID
        <input id="username" name="username" type="text" onblur="searchUsername()" placeholder="输入ID，用于登录"/>
    </a>
    <a id="s_text" style="font-size:14px;position: absolute; left: 900px; top: 155px; color: darkred"></a>
    <a style="position: absolute; left: 640px; top: 180px;">密码：
        <input name="password" type="text" placeholder="输入密码"/>
    </a>
    <img style="position: absolute; left: 900px; top: 210px;" src="../VerificationCode" alt="点击更换" onclick="changeVerificationCode(this)"/>
    <a style="position: absolute; left: 640px; top: 210px;">验证码
        <input name="VerificationCode" type="text"/>
    </a>
    <input style="position: absolute; left: 740px; top: 240px;" type="submit" value="注册" height="120" width="50"/>
    <a style="position: absolute; left: 700px; top: 270px;" href="Login.jsp">已有账号？点此登录</a>
</form>
</body>
</html>

<script>
    function changeVerificationCode(img) {
        img.src = "../VerificationCode?time=" + new Date().getTime();
    }

    function searchUsername() {
        var username = document.getElementById("username").value;
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status==200){
                var respText = xhr.responseText;
                var text = document.getElementById("s_text");
                text.innerText = respText;
            }
        };
        xhr.open("GET","${pageContext.request.contextPath}/FindRegister?username="+username);
        xhr.send(null);
    }
</script>
